<template>
  <div class="footerBox">
    <div class="footer">
      <ul>
        <li>
          <router-link to="/">
            <van-icon name="wap-home-o" size="2rem" />
            <p>首页</p>
          </router-link>
        </li>
        <li>
          <router-link to="/product/type/index">
            <van-icon name="apps-o" size="2rem" />
            <p>分类</p>
          </router-link>
        </li>
        <li>
          <router-link to="/product/cart/index">
            <van-icon name="cart-o" size="2rem" />
            <p>购物车</p>
          </router-link>
        </li>
        <li>
          <router-link to="/user/base/index">
            <van-icon name="manager-o" size="2rem" />
            <p>我的</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  //定义一个组件
  // export default  == class menus{}
  export default {
    name: 'menus',
  }
</script>

<style>
  .footerBox .footer{
    height:70px;
  }

  .footerBox .footer ul{
    padding:.5rem 0rem;
  }

  .footer a{
    text-align: center;
  }

  .footer a.active p{
    color:#fe7923!important;
  }

  .footer a.active .van-icon{
    color:#fe7923!important;
  }
</style>